<template>
<view>
	<view>
		<view class="main-bg-color">
			<auto-header></auto-header>
		</view>
		<view class="index-header main-bg-color">
			<view class="shop-choice-view">
				<picker @change="onShopChange" :value="shopIndex" range-key="name" :range="shopList" v-if="curRole==='boss'">
					<view class="uni-input">{{shopList[shopIndex].name}}</view>
				</picker>
				<picker @change="onShopChange" :value="shopIndex" range-key="shopName" :range="workerList" v-if="curRole==='worker'">
					<view class="uni-input">{{workerList[shopIndex].shop.name}}</view>
				</picker>
			</view>
			<view class="index-search-view">
				<view class="search-view-con">
					<view class="iconfont icon-chazhao"></view>
					<input placeholder-class="placeholder" placeholder="姓名/电话查找客户" confirm-type="search" @blur="onConfirmSearch" @confirm="onConfirmSearch"/>
				</view>
			</view>
		</view>
		<auto-round>
			<view class="index-header-opt">
				<view class="single-opt">
					<view v-if="isBoss" :class="'role-model '+(curRole==='boss'?'current':'')" @click="changeRole('boss')"><view>老板模式</view></view>
				</view>
				<view class="single-opt">
					<view class="single-opt-btn">
						<view class="iconfont icon-shouyintai"></view>
						<view class="title">快速收银</view>
					</view>
				</view>
				<view class="single-opt">
					<view class="single-opt-btn">
						<view class="iconfont icon-xiaoliang" ></view>
						<view class="title">销量分析</view>
					</view>
				</view>
				<view class="single-opt">
					<view v-if="!isBoss && isWorker" :class="'role-model '+(curRole==='worker'?'current':'')" @click="changeRole('worker')"><view>员工模式</view></view>
				</view>
			</view>
		</auto-round>
		
		<view class="main-container" v-if="loaded">
			<own-index-function @onDelete="onDeleteShop" :curRole="curRole" :isBoss="isBoss" :isWorker="isWorker"/>
		</view>
	</view>
	
	<auto-modal title="创建新店铺" :show="addShop" @onOpt="onAddShop" @onClose="addShop = false">
		<input v-model="newShopName" class="shopNameInput" placeholder="输入店铺名称"/>
	</auto-modal>
</view>
</template>

<script>
var that;

export default {
	data() {
		return {
			shopList: [], //门店信息
			shareId: 0,
			shopIndex: 0,
			loaded: false,
			addShop: false,
			newShopName: "",
			isBoss: false, 
			isWorker: false,
			workerList: [],
			addShopData: {id: 0, name: "+创建新店铺"},
			curShop: {},
			curRole: '', //当前角色，boss/worker
			
			bgColor: "#fd521b",
			searchTime: 0,
		}
	},
	onLoad(options) {
		that = this;
		that.shareId = options.shareId;
		that.loadData();
	},
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		loadData: function() {
			that = this;
			const currentType = this.$common.getCurrentType();
			that.$request.get("/index/index", {}).then((res) => {
				// console.log("===========>>", res);
				let shopList = res.shopList;
				that.isBoss = res.isBoss;
				that.isWorker = res.isWorker;
				that.workerList = res.workerList;
				that.$auth.setAuthMenu(res.menuList);
				if(currentType) {
					that.curRole = currentType;
				} else {
					if(that.isBoss) {
						that.curRole = "boss";
					} else if(that.isWorker) {
						that.curRole = "worker";
					}
				}
				
				if(!that.isBoss && !that.isWorker) {
					console.log('------没有店铺----')
					uni.redirectTo({ //如果即不是老板也不是员工，则跳转到添加店铺的页面
						url: "/pages/shop/addIndex"
					})
				} else {
					that.loaded = true;
					shopList.push(that.addShopData);
					that.shopList = shopList;
					that.loadIndexData();
				}
			})
		},
		loadIndexData: function(shopId) {
			if(!shopId) {
				const curCacheShop = this.$common.getCurShop();
				if(curCacheShop && curCacheShop.id) {
					const theIndex = this.shopList.findIndex((item)=>item.id === curCacheShop.id);
					if(theIndex>=0) {
						this.shopIndex = theIndex;
					}
				}
			} else {
				const theIndex = this.shopList.findIndex((item)=>item.id === shopId);
				if(theIndex>=0) {
					this.shopIndex = theIndex;
				}
			}
			this.$common.setCurShop(this.shopList[this.shopIndex]);
		},
		onConfirmSearch: function(e) { //查找客户
			const curTime = new Date().getTime();
			if(curTime - that.searchTime>800) {
				that.searchTime = curTime;
				const value = e.detail.value;
				uni.navigateTo({
					url: "/pages/customer/list?keyword="+value
				})
			}
		},
		onShopChange: function(e) {
			const index = Number(e.detail.value);
			console.log(index, this.shopList.length)
			if(index==this.shopList.length-1) {
				//表示添加店铺
				this.addShop = true;
			} else {
				this.shopIndex = index;
				this.curShop = this.shopList[index];
				this.loadIndexData(this.curShop.id);
			}
		},
		onAddShop: function(flag) {
			if(flag==='cancel') {
				that.addShop = false;
			} else {
				let name = this.newShopName.trim();
				if(name.length>1) {
					this.$request.get("/shop/saveShop", {shopName: this.newShopName, status: "1"}, {"method": "post"}).then((res) => {
						if(res.flag) {
							uni.showToast({
								title: "创建成功",
								icon: "success",
								success() {
									uni.switchTab({
										url: "/pages/index/index"
									})
									that.addShop = false;
									that.$common.reloadCur();
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							})
						}
					})
				} else {
					uni.showToast({
						title: "请认真输入店铺名称",
						icon: "none"
					})
				}
			}
		},
		onDeleteShop: function() {
			this.$request.get("/shop/deleteShop", {}, {method: "post"}).then((res) => {
				if(res.code==0) {
					const shop = that.$common.getCurShop();
					console.log(shop)
					that.shopList.splice(that.shopList.findIndex((item)=>item.id === shop.id), 1);
					if(that.shopList.length>1) { //由于有 添加店铺 数据，所以这里应该是1
						that.$common.setCurShop(that.shopList[0]);
						that.loadIndexData();
					} else {
						uni.redirectTo({
							url: "/pages/index/first"
						})
					}
				} else {
					that.$common.showNormalToast(res.msg);
				}
			})
		},
		changeRole: function(role) {
			if(this.curRole !== role) {
				this.curRole = role;
				this.$common.setCurrentType(role);
			}
		}
	}
}
</script>

<style lang="scss">
.main-container {
	padding-top: 40rpx;
}

.index-header {
	width: 100vw; height: 60rpx; display: inline-flex; line-height: 60rpx;
	
	.shop-choice-view {
		padding-left: 20rpx; max-width: 200rpx; overflow: hidden;
		
		.uni-input {
			font-size: 28rpx;
		}
	}
	.index-search-view {
		flex: 1; padding: 0px 200rpx 0px 10rpx;
		
		.search-view-con {
			background:#b85806; border-radius: 10rpx;
			display: inline-flex; width: 100%;
			
			.iconfont {
				width: 50rpx; text-align: center;
			}
			.placeholder {
				color:#b8af49;
			}
			input {
				height: 60rpx; font-size: 26rpx; color:#FFF;
			}
		}
	}
}

.index-header-opt {
	width: 100%; display: inline-flex;
	
	margin-top: 60rpx;
	.single-opt {
		flex: 1; text-align: center;
		
		.single-opt-btn {
			border:1px #e08334 solid; border-radius: 20rpx; display: inline-block; text-align: center; padding: 20rpx;
			background: #b85806;
			.iconfont {
				color:#FFF; font-size: 70rpx;
			}
			.title {
				color:#FFF; margin-top: 18rpx; font-size: 28rpx;
			}
		}
		
		.role-model {
			view {
				padding: 12rpx 0px;
				margin: 50rpx 10rpx 0px 10rpx;
				border-radius: 10rpx;
				border: 1px #FF5722 solid;
				color: #f6d1c6;
				background: #FF8A65;
			}
		}
		.role-model.current {
			view {
				border: 1px #A1887F solid;
				color: #ffffff;
				background: #742310;
			}
		}
	}
	/* .single-opt:first-child {
		text-align: right; padding-right: 20rpx;
	}
	.single-opt:last-child {
		padding-left: 20rpx;
	} */
}


.shopNameInput {
	border:1px #ddd solid; border-radius: 5px; height: 100rpx; padding: 0px 10rpx;
}



</style>
